<template>
  <div>
    <div style="display: flex;margin:15px 0 15px 35px;min-height:820px;background-color: white;border-radius: 26px">
      <div style="width: 1450px;min-height: 500px;">
        <div v-if="attendCourse" style="width: 1360px;height: 44px;padding: 8px 20px;margin:30px 0 0 25px;
    border-radius: 12px;background-color: #F8F8F8;display: flex">
          <div style="width: 80%">
            <p style="margin: 0;">亲爱的 {{ user.userName }} ，欢迎回来~~</p>
            <p style="margin: 0;font-size: 14px">你上一次学习到
              <el-link @click="on_content(courseId,attendCourse.chapterId,attendCourse.lessonId)">
                {{ attendCourse.chapterName }} > {{ attendCourse.lessonName }}
              </el-link>
            </p>
          </div>
          <div style="width: 20%;text-align: right">
            <el-button type="primary" @click="on_content(courseId,attendCourse.chapterId,attendCourse.lessonId)" style="width: 120px;height: 45px;">继续学习</el-button>
          </div>
        </div>
        <div v-else style="width: 1360px;height: 44px;padding: 8px 20px;margin:30px 0 0 25px;
    border-radius: 12px;background-color: #F8F8F8;display: flex">
          <div style="width: 80%">
            <p style="margin: 0;">亲爱的 {{ user.userName }}</p>
            <p style="margin: 0;font-size: 14px">欢迎你加入本课程，赶快开启学习之旅吧~</p>
          </div>
          <div style="width: 20%;text-align: right">
            <el-button type="primary" @click="()=>{this.$router.push({path:'/learn/content/'+this.courseId})}" style="width: 120px;height: 45px;">开始学习</el-button>
          </div>
        </div>
        <div style="display: flex;flex-direction: column;">
          <p style="margin:5px 0 0 30px;font-size: 20px;">公告</p>
          <div v-if="total!==0" style="display: flex;flex-direction: column;">
            <div v-for="(item,index) in announceList" :key="item.announceId"
                 style="margin:10px 30px;border: 2px solid #999999;border-radius: 14px">
              <p style="font-size: 18px;color: #333333;margin-left: 20px">{{ item.announceName }}</p>
              <div v-html="item.content" style="margin:0 20px 20px 20px;"></div>
              <p style="float: right;margin-right: 30px">{{ item.createTime|formatDate('yyyy-MM-dd HH:mm:ss') }}</p>
            </div>
            <el-pagination
                @size-change="handleSizechange"
                @current-change="getPage"
                :current-page="currentPage"
                :page-sizes="[3,6,10]"
                :page-size="pageSize"
                layout="total,sizes,prev,pager,next,jumper"
                :total="total"
                style="text-align: center">
            </el-pagination>
          </div>
        </div>
      </div>
      <div style="width: 280px;min-height: 500px;">
        <div style="width: 238px;height: 300px;margin:25px 0 0 10px;background-color: #F7F7F7;border-radius: 12px">
          <p style="padding: 10px;margin:0;font-size: 18px">最近更新</p>
          <p style="padding-left: 10px;margin:0;font-size: 14px">课件</p>
          <p v-for="item in lessonList.slice(0,10)" style="margin: 4px 14px">
            <el-link @click="on_content(courseId,item.chapterId,item.lessonId)" target="_blank">
              {{ item.chapterName }}>{{ item.lessonName }}
            </el-link>
          </p>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "AnnounceView",
  data() {
    return {
      user: {},
      courseId: '',
      attendCourse: '',
      announceList: [],
      lessonList: [],
      currentPage: 1,
      pageSize: 3,
      total: 0,
    }
  },
  methods: {
    handleSizechange(size) {
      this.pageSize = size;
      this.getPage(1);
    },
    getPage(current = 1) {
      this.currentPage = current;
      this.$axios({
        method: 'get',
        url: `http://localhost:8089/announce/getPageByCourseId/${this.currentPage}/${this.pageSize}/${this.courseId}`,
      }).then(res => {
        if (res.data.code === 200) {
          this.total = res.data.dataobject.total;
          this.announceList = res.data.dataobject.pageList;
        }
      }).catch(err => console.log(err));
    },
    getLessonByIdUpdateDesc() {
      this.$axios({
        method: 'get',
        url: `http://localhost:8089/lesson/seleteLessonByCourseIdUpdateTimeDesc/${this.courseId}`,
      }).then(res => {
        if (res.data.code === 200) {
          this.lessonList = res.data.dataobject;
        }
      }).catch(err => console.log(err));
    },
    getAttendCourse(courseId, userId) {
      this.$axios({
        method: 'post',
        url: `http://localhost:8089/user/attendCourse/selectAttendCourseAndName`,
        data: {"courseId": courseId, "userId": userId}
      }).then(res => {
        if (res.data.code === 200) {
          this.attendCourse = res.data.dataobject;
        }
      }).catch(err => console.log(err));
    },
    on_content(courseId, chapterId, lessonId) {
      this.$router.push({path: "/learn/content/" + courseId + "/" + chapterId + "/" + lessonId})
    }
  },
  filters: {
    formatDate: function (value, args) {
      var dt = new Date(value);
      if (args == 'yyyy年MM月dd日') {// yyyy年MM月dd日
        let year = dt.getFullYear();
        let month = (dt.getMonth() + 1).toString().padStart(2, '0');
        let date = dt.getDate().toString().padStart(2, '0');
        return `${year}年${month}月${date}日`;
      } else if (args == 'yyyy-MM-dd HH:mm:ss') {// yyyy-MM-dd HH:mm:ss
        let year = dt.getFullYear();
        let month = (dt.getMonth() + 1).toString().padStart(2, '0');
        let date = dt.getDate().toString().padStart(2, '0');
        let hour = dt.getHours().toString().padStart(2, '0');
        let minute = dt.getMinutes().toString().padStart(2, '0');
        let second = dt.getSeconds().toString().padStart(2, '0');
        return `${year}-${month}-${date} ${hour}:${minute}:${second}`;
      }
    }
  },
  created() {
    this.courseId = this.$route.params.courseId
    this.user['userId'] = localStorage.getItem('userId')
    this.user['userName'] = localStorage.getItem('userName')
    this.getAttendCourse(this.courseId, this.user.userId)
    this.getPage()
    this.getLessonByIdUpdateDesc()
  }
}
</script>

<style scoped>

</style>